// ============================================================================
// Base of the framework,
// extracted from Bootstrap 4.
// ============================================================================

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint);

    // ------------------------------------------------------------------------
    // Flexbox utilities
    // see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to learn the 
    // basis of flexbox.
    // ------------------------------------------------------------------------

    .d#{$infix}-flex       { display: flex; }
    .d#{$infix}-inlineflex { display: inline-flex; }

    .flex#{$infix}-row            { flex-direction: row; }
    .flex#{$infix}-column         { flex-direction: column; }
    .flex#{$infix}-row-reverse    { flex-direction: row-reverse; }
    .flex#{$infix}-column-reverse { flex-direction: column-reverse; }

    .flex#{$infix}-wrap         { flex-wrap: wrap; }
    .flex#{$infix}-nowrap       { flex-wrap: nowrap; }
    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse; }
    .flex#{$infix}-fill         { flex: 1 1 auto; }
    .flex#{$infix}-grow-0       { flex-grow: 0; }
    .flex#{$infix}-grow-1       { flex-grow: 1; }
    .flex#{$infix}-shrink-0     { flex-shrink: 0; }
    .flex#{$infix}-shrink-1     { flex-shrink: 1; }

    .justify-content#{$infix}-start   { justify-content: flex-start; }
    .justify-content#{$infix}-end     { justify-content: flex-end; }
    .justify-content#{$infix}-center  { justify-content: center; }
    .justify-content#{$infix}-between { justify-content: space-between; }
    .justify-content#{$infix}-around  { justify-content: space-around; }

    .align-items#{$infix}-start    { align-items: flex-start; }
    .align-items#{$infix}-end      { align-items: flex-end; }
    .align-items#{$infix}-center   { align-items: center; }
    .align-items#{$infix}-baseline { align-items: baseline; }
    .align-items#{$infix}-stretch  { align-items: stretch; }

    .align-content#{$infix}-start   { align-content: flex-start; }
    .align-content#{$infix}-end     { align-content: flex-end; }
    .align-content#{$infix}-center  { align-content: center; }
    .align-content#{$infix}-between { align-content: space-between; }
    .align-content#{$infix}-around  { align-content: space-around; }
    .align-content#{$infix}-stretch { align-content: stretch; }

    .align-self#{$infix}-auto     { align-self: auto; }
    .align-self#{$infix}-start    { align-self: flex-start; }
    .align-self#{$infix}-end      { align-self: flex-end; }
    .align-self#{$infix}-center   { align-self: center; }
    .align-self#{$infix}-baseline { align-self: baseline; }
    .align-self#{$infix}-stretch  { align-self: stretch; }

    // ------------------------------------------------------------------------
    // Spacing,
    // including base spacing of padding & margin.
    // ------------------------------------------------------------------------

    $spacers: () !default;
    $spacers: map-merge(
      (
        0: 0,
        1: ($spacer * .25),
        2: ($spacer * .5),
        3: $spacer,
        4: ($spacer * 1.5),
        5: ($spacer * 3)
      ),
      $spacers
    );

    @each $space-key in map-keys($spacers) {
      $key: #{$infix}-#{$space-key};
      $val: map-get($spacers, $space-key);

      .p#{$key}, .px#{$key}, .pl#{$key} { padding-left: $val !important; }
      .p#{$key}, .px#{$key}, .pr#{$key} { padding-right: $val !important; }
      .p#{$key}, .py#{$key}, .pt#{$key} { padding-top: $val !important; }
      .p#{$key}, .py#{$key}, .pb#{$key} { padding-bottom: $val !important; }

      .m#{$key}, .mx#{$key}, .ml#{$key} { margin-left: $val !important; }
      .m#{$key}, .mx#{$key}, .mr#{$key} { margin-right: $val !important; }
      .m#{$key}, .my#{$key}, .mt#{$key} { margin-top: $val !important; }
      .m#{$key}, .my#{$key}, .mb#{$key} { margin-bottom: $val !important; }
    }

    .m#{$infix}-auto, .ml#{$infix}-auto, .mx#{$infix}-auto { margin-left: auto !important; }
    .m#{$infix}-auto, .mr#{$infix}-auto, .mx#{$infix}-auto { margin-right: auto !important; }
    .m#{$infix}-auto, .mt#{$infix}-auto, .my#{$infix}-auto { margin-top: auto !important; }
    .m#{$infix}-auto, .mb#{$infix}-auto, .my#{$infix}-auto { margin-bottom: auto !important; }

    // ------------------------------------------------------------------------
    // Size,
    // including base size of width & height.
    // ------------------------------------------------------------------------

    @each $size-key in map-keys($sizes) {
      .w#{$infix}-#{$size-key} { width: map-get($sizes, $size-key); }
      .h#{$infix}-#{$size-key} { height: map-get($sizes, $size-key); }
    }

    // ------------------------------------------------------------------------
    // Visibility
    // ------------------------------------------------------------------------

    .d#{$infix}-none { display: none; }
    .visible#{$infix} { visibility: visible; }
    .hidden#{$infix} { visibility: hidden; }

    // ------------------------------------------------------------------------
    // Image
    // ------------------------------------------------------------------------

    .image {
      width: 100%;
    }
  }
}
